<template>
    <div class="app-container">
        <div class="customContainer">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="选择门店" v-model="formInline.store_id" class="w160" filterable @change="storeChange">
                        <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <el-select placeholder="选择区域" v-model="formInline.area_id" class="w160">
                        <el-option v-for="item in area_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <el-table  highlight-current-row :data="list" border size="mini">
                <el-table-column align="center" label="时间" prop="datetime"></el-table-column>
                <el-table-column align="center" label="杂项区域" prop="area_name"></el-table-column>
                <el-table-column align="center" label="杂项类型" prop="type"></el-table-column>
                <el-table-column align="center" label="支付宝" prop="money_aliy"></el-table-column>
                <el-table-column align="center" label="微信" prop="money_wx"></el-table-column>
                <el-table-column align="center" label="银行卡" prop="bank_actual"></el-table-column>
                <el-table-column align="center" label="现金" prop="cash_actual"></el-table-column>
                <el-table-column align="center" label="代收待核" prop="collecting_actual"></el-table-column>
                <el-table-column align="center" label="报账店员" prop="nick"></el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        storeList,
        areaList
    } from "@/api/member/sundry_detail";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                list: null,
                listLoading: false,
                store_list: [],
                area_list: [],
                formInline: {
                    begin_time: '',
                    end_time: '',
                    store_id: '',
                    area_id: '',
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        created() {
            this.getstore();
        },
        methods: {
            storeChange() {
                this.formInline.area_id = '';
                this.getarea();
            },
            getstore() {
                storeList({ brand: this.formInline.brand, category_id: 326 }).then(response => {
                    this.store_list = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    }
                    this.getarea();
                });
            },
            getarea() {
                areaList({ sid: this.formInline.store_id, category_id: 326 }).then(response => {
                    response.unshift({ id: '', name: '全部区域' });
                    this.area_list = response;
                    this.formInline.area_id = response[0].id;
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    response.forEach(val => {
                        val.no *= 1
                    });
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>